<template>
  <custom-table height="100%" v-loading="loading" border v-bind="$attrs">
    <cvp-columns v-for="item in columns" :key="item.random" :col="item"> </cvp-columns>
  </custom-table>
</template>
<script lang="ts" setup>
import CvpColumns from './components/CvpColumns'
import cvpHeader from './components/header.vue'
import customTable from './components/CustomTable.vue'
// import {ElTable} from 'element-plus'
// const columns = ref<any>([])
const props = withDefaults(
  defineProps<{
    tableColoums: any
    loading: boolean
  }>(),
  {
    tableColoums: [],
    loading: false
  }
)
const scopedSlots = useSlots()
const mixinsSlots = (column: any[]): any => {
  column.forEach((it) => {
    if (it.defaultSlot) {
      for (const key in it.defaultSlot) {
        if (scopedSlots[it.defaultSlot[key]]) it.defaultSlot[key] = scopedSlots[it.defaultSlot[key]]
      }
    }
    if (it?.expase?.isExpase) {
      const num = it.expase.num ?? 1
      if (it.children && it.children.length > num) it.oldChildren = it.children
      if (it.expase.expaseStatus == 'close') {
        it.children = it.children.slice(0, num)
      }
      if (!it.defaultSlot) it.defaultSlot = {}
      it.defaultSlot.header = () => {
        // return h(cvpHeader, {props: {row: it, isExpase }, onToExpase: onToExpase}, '')
        return h(cvpHeader, { props: { row: it }, onToExpase: onToExpase }, '')
      }
    }
    it.random = Math.random()
    it.children && mixinsSlots(it.children)
  })
  return column
}

const onToExpase = () => {
  // expaseFlag.value = val
  // columns.value = []
}
onMounted(() => {
  // console.log(props.tableColoums, 'tableColoums')
})
const tempColumns = ref<any>([])
const columns: any = computed(() => {
  // (tempColumns.value)
  const columnsArr = mixinsSlots(tempColumns.value)
  return columnsArr
})
watch(
  () => props.tableColoums,
  (newVal) => {
    tempColumns.value = newVal
  },
  {
    immediate: true
  }
)
// const columns = computed({
//   get(){
//     console.log('get')
//     let columnsArr:any =deepClone()
//     columnsArr =  mixinsSlots(columnsArr)
//     return columnsArr
//   },
//   set(newVal){
//     // columns.value = newVal
//     console.log(newVal, 'set')
//   }
// })
</script>

<style scoped lang="scss">
/* :deep(.el-table th.is-hidden>*),:deep(.el-table td.is-hidden>*) {
    visibility: visible
  }
  :deep(.el-table__body),
  :deep(.el-table__row.hover-row td){
    background-color: transparent !important;
  } */
:deep(.el-table .cell) {
  padding: 0 5px;
}
</style>
